<template>
  <div class="home_body  ">
    <div class="main_body">
      <div class="top_title ">
        全国数据上报
      </div>
      <div class="top_button_list">
        <!--                    注释多余按钮-->
        <el-button type="primary" @click="allSubmit" :loading="btnLoading" :disabled="isDisable || allinfo.onloading">
          上报全部数据
        </el-button>
        <!--<el-button type="primary" @click="testOne">测试上报单个</el-button>-->
        <el-button type="text" @click="refresh">刷新</el-button>
        <!--<div v-if="allinfo.showLoading && allinfo.onloading" class="info">-->
        <!--    <div class="loading"></div>-->
        <!--    <span>数据上报中，请耐心等待</span>-->
        <!--</div>-->
        <!--<div v-if="allinfo.showLoading && allinfo.finished" class="info">-->
        <!--    <i class="el-icon-check"></i>-->
        <!--    数据上报成功 !-->
        <!--</div>-->
      </div>
      <div class="bottom_body ">

        <div class="bottom_info_body ">
          <div class="log_info ">
            <div class="log_title">
              操作日志
            </div>
            <div class="log_content overflow-auto-hidden">
              <div v-if="logList.length > 0">
                <div class="log_item" v-for="(item,index) in logList" :key="index">
                  <div class="log_item_title">
                    <div class="circle"></div>
                    <div class="log_item_time">{{ item.createTime }}</div>
                  </div>
                  <div class="log_item_content ">
                    <span class="log_item_contentFont">{{ item.result }}</span>
                    <!--<span class="log_item_contentFont ">{{item.schoolCode}}</span>-->
                    <!--<span class="log_item_contentFont">{{item.userName}}</span>-->
                    <!--<span class="log_item_contentFont">{{item.schoolName}}</span>-->
                    <!--<span class="log_item_contentFont">{{item.data.split("??")[0]}}</span>-->
                    <!--<span class="number_item">{{item.total}}</span>-->
                    <!--<span class="log_item_contentFont">{{item.data.split("??")[1]}}</span>-->
                  </div>
                  <div v-if="item.url" class="w-100 pl-28 ">
                    <Button size="small" type="primary" class=" " @click="downloadLog(item.url)">下载错误日志</Button>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="logPage.pages > 1" v-loading="logBtnLoading" class="log_footer" @click="showMoreLog">
              点击显示更多
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        class="cdialog"
    >
      <div class=" fs-16 d-flex-center">
        <div class=" flex-column d-flex-center p-12  mr-28" v-if="downloadType != '2'">
          <span>新增数据（条）</span>
          <span class="fs-20 fw-7 ">{{ sourceinfoData.successCount }}</span>
        </div>
        <div class="d-flex-center flex-column  p-12  mr-28">
          <span>失败数据（条）</span>
          <span class="fs-20 fw-7 ">{{ sourceinfoData.failCount }}</span>
        </div>
        <div class="d-flex-center flex-column  p-12 ">
          <span>更新数据（条）</span>
          <span class="fs-20 fw-7 ">{{ sourceinfoData.updateCount }}</span>
        </div>
      </div>
      <div class="mt-20" v-if="sourceinfoData.failCount > 0">
        <span>出现有误信息，</span><span class="down-btn" @click="download()">请下载查看</span>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  graduationDestinationInformationBackupAPI,
  operationLogAPI,
  positionReportAPI,
  positionReportDelAPI,
  synchronizationAccountAPI,
  synchronizationAPI,
  synchronizationArchiveAPI,
  synchronizationDirectionAPI,
  reportRealDataApi,
  reportHistoryApi, testOneApi
} from '../../..//api/bys/dataReport';
import { exportAllPersonInfo } from '@/api/bys/personInfo/bys';
import Cookies from 'js-cookie';

export default {
  data() {
    return {
      resource: '',
      importing1: false,
      importing2: false,
      dialogVisible: false,
      dialogTitle: '',
      showReport: false,
      downloadType: '1',//下载类型
      isDisable: false, //是否禁用同步按钮
      sourceinfoData: {},
      allinfo: {
        //上报所有数据
        showLoading: false, //是否显示正在加载中
        onloading: false, //是否正在加载中
        finished: false //是否完成加载
      },
      sourceinfo: {
        //毕业去向信息
        showLoading: false, //是否显示正在加载中
        onloading: false, //是否正在加载中
        finished: false //是否完成加载
      },
      position: {
        //职位信息
        showLoading: false, //是否显示正在加载中
        onloading: false, //是否正在加载中
        finished: false //是否完成加载
      },
      finishinfo: {
        //毕业去向信息
        showLoading: false, //是否显示正在加载中
        onloading: false, //是否正在加载中
        finished: false //是否完成加载
      },
      archivesinfo: {
        //档案转递信息
        showLoading: false, //是否显示正在加载中
        onloading: false, //是否正在加载中
        finished: false //是否完成加载
      },
      accountinfo: {
        //户口迁移信息
        showLoading: false, //是否显示正在加载中
        onloading: false, //是否正在加载中
        finished: false //是否完成加载
      },
      logBtnLoading: false,
      logPage: {
        pageSize: 10,
        pageNo: 1,
        pages: 0
      },
      logList: [],
      fullscreenLoading: false,
      btnLoading: false
    };
  },
  mounted() {
    this.showMoreLog();
    this.resource = JSON.parse(Cookies.get('userInfo')).resource;
  },
  methods: {
    async downloadLog(url) {
      if (url && url.length > 0) {
        if (url.indexOf('hnbysjy.jyt.henan.gov.cn') !== -1) {
          // const url = 'https://hnbysjy.jyt.henan.gov.cn/file-view-test/jyqx/jyqx66825a97e4b009ea29b73607';
          const fileName = '数据上报错误日志.xlsx'; // 你可以根据需要更改文件名
          try {
            // 使用 fetch 获取文件内容
            const response = await fetch(url);
            if (!response.ok) {
              throw new Error('文件未成功获取：' + response.statusText);
            }
            // 获取文件的 Blob 对象
            const blob = await response.blob();
            // 创建一个隐藏的 <a> 元素
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = URL.createObjectURL(blob);
            a.download = fileName;
            // 将 <a> 元素添加到 DOM 中
            document.body.appendChild(a);
            // 触发点击事件
            a.click();
            // 移除 <a> 元素
            document.body.removeChild(a);
            // 释放 Blob URL
            URL.revokeObjectURL(a.href);
          } catch (error) {
            console.error('There has been a problem with your fetch operation:', error);
          }

        }
      }
    },
    showMoreLog() {
      this.logBtnLoading = true;
      let logPage = {
        'pageNo': this.logPage.pageNo,
        'pageSize': this.logPage.pageSize
      };
      reportHistoryApi(JSON.stringify(logPage)).then(res => {
        if (res.success) {
          console.log(res, 'res.result');
          let moreLog = res.result.records || [];
          if (this.logPage.pageNo === 1) {
            this.logList = moreLog;
          } else {
            this.logList = [...this.logList, ...moreLog];
          }
          this.logPage.pages = res.result.pages;
          this.logPage.pageNo++;
          this.logBtnLoading = false;
        }
      });
    },
    //点击上报所有数据事件
    allSubmit() {
      this.btnLoading = true;
      const loading = this.$loading({
        lock: true,
        text: '上报中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      reportRealDataApi().then(res => {
        this.fullscreenLoading = true;
        loading.close();
        this.btnLoading = false;
        if (res.code == 200) {
          this.fullscreenLoading = false;
          this.$Message.info(res.message);
          this.refresh();
        } else {
          this.fullscreenLoading = false;
          this.$Message.error(res.message);
        }
      });
    },
    testOne() {
      testOneApi().then(res => {
        if (res.code === 200) {
          this.$message.success(res.message);
        }
      });
    },
    refresh() {
      this.logPage.pageNo = 1;
      this.logList = [];
      this.showMoreLog();
    },
    //职位上报测试
    positionReportAPI() {
      this.sourceinfo.showLoading = true;
      this.sourceinfo.onloading = true;
      this.sourceinfo.finished = false;
      positionReportAPI().then(res => {
        if (res.success) {
          this.$Message.info('上报成功');

        } else {
          this.$Message.info('上报失败');
        }
        this.sourceinfo.showLoading = false;
        this.sourceinfo.onloading = false;
        this.sourceinfo.finished = true;
      });
    },
    //职位上报测试

    positionSubmit() {
      this.position.showLoading = true;
      this.position.onloading = true;
      this.position.finished = false;
      positionReportAPI().then(res => {
        if (res.success) {
          this.$Message.info('上报成功');

        } else {
          this.$Message.info('上报失败');
        }
        this.position.showLoading = false;
        this.position.onloading = false;
        this.position.finished = true;
      });
    },

    positionDelSubmit() {
      this.position.showLoading = true;
      this.position.onloading = true;
      this.position.finished = false;
      positionReportDelAPI().then(res => {
        if (res.success) {
          this.$Message.info('上报成功');

        } else {
          this.$Message.info('上报失败');
        }
        this.position.showLoading = false;
        this.position.onloading = false;
        this.position.finished = true;
      });
    },

    //点击上报毕业去向信息事件
    sourceSubmit() {
      this.sourceinfo.showLoading = true;
      this.sourceinfo.onloading = true;
      this.sourceinfo.finished = false;
      synchronizationAPI().then(res => {
        if (res.success) {
          this.sourceinfoData = res?.result || {};
          console.log(this.sourceinfoData, 'this.sourceinfoData');
          this.sourceinfo.showLoading = false;
          this.sourceinfo.onloading = false;
          this.sourceinfo.finished = true;
          this.dialogTitle = '上报生源信息结果';
          this.dialogVisible = true;
          this.downloadType = '1';
        } else {
          this.sourceinfo.showLoading = false;
          this.sourceinfo.onloading = false;
          this.sourceinfo.finished = true;
        }
        this.logPage.pageNo = 1;
        this.logPage.pages = 0;
        this.logPage.pageSize = 10;
        this.showMoreLog();
      });
    },
    // 备份生源
    dropExportAll() {
      this.importing1 = true;
      exportAllPersonInfo().then(res => {
        this.importing1 = false;
        // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
        const blob = new Blob([res], { type: 'charset=utf-8' });
        let url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', '生源信息备份.xlsx');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link); // 删除节点
        window.URL.revokeObjectURL(url); //释放该 url
      });
    },
    // 备份毕业去向
    exportAllGraduationDestination() {
      this.importing2 = true;
      graduationDestinationInformationBackupAPI().then(res => {
        this.importing2 = false;
        // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
        const blob = new Blob([res], { type: 'charset=utf-8' });
        let url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', '毕业去向备份.xlsx');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link); // 删除节点
        window.URL.revokeObjectURL(url); //释放该 url
      });
    },
    //点击上报毕业去向信息事件
    finishSubmit() {
      this.finishinfo.showLoading = true;
      this.finishinfo.onloading = true;
      this.finishinfo.finished = false;
      synchronizationDirectionAPI().then(res => {
        if (res.success) {
          this.sourceinfoData = res?.result || {};
          this.finishinfo.showLoading = false;
          this.finishinfo.onloading = false;
          this.finishinfo.finished = true;
          this.dialogTitle = '上报去向登记信息结果';
          this.dialogVisible = true;
          this.downloadType = '2';
        } else {
          this.finishinfo.showLoading = false;
          this.finishinfo.onloading = false;
        }
        this.logPage.pageNo = 1;
        this.logPage.pages = 0;
        this.logPage.pageSize = 10;
        this.showMoreLog();
      });
    },
    //点击上报档案转递信息事件
    archivesSubmit() {
      this.archivesinfo.showLoading = true;
      this.archivesinfo.onloading = true;
      this.archivesinfo.finished = false;
      synchronizationArchiveAPI().then(res => {
        if (res.success) {
          this.sourceinfoData = res?.result || {};
          this.archivesinfo.showLoading = false;
          this.archivesinfo.onloading = false;
          this.archivesinfo.finished = true;
          this.dialogTitle = '上报户档登记信息结果';
          this.dialogVisible = true;
          this.downloadType = '2';
        } else {
          this.archivesinfo.showLoading = false;
          this.archivesinfo.onloading = false;
        }
        this.logPage.pageNo = 1;
        this.logPage.pages = 0;
        this.logPage.pageSize = 10;
        this.showMoreLog();
      });
    },
    //点击上报户口迁移信息事件
    accountSubmit() {
      this.accountinfo.showLoading = true;
      this.accountinfo.onloading = true;
      this.accountinfo.finished = false;
      synchronizationAccountAPI().then(res => {
        if (res.success) {
          this.sourceinfoData = res?.result || {};
          this.accountinfo.showLoading = false;
          this.accountinfo.onloading = false;
          this.accountinfo.finished = true;
          this.dialogTitle = '上报户口登记信息结果';
          this.dialogVisible = true;
          this.downloadType = '2';
        } else {
          this.accountinfo.showLoading = false;
          this.accountinfo.onloading = false;
        }
        this.logPage.pageNo = 1;
        this.logPage.pages = 0;
        this.logPage.pageSize = 10;
        this.showMoreLog();
      });
    },
    //点击下载查看
    async download() {
      if (this.downloadType === '1') {
        if (this.sourceinfoData.url.indexOf('hnbysjy.jyt.henan.gov.cn') !== -1) {
          // const url = 'https://hnbysjy.jyt.henan.gov.cn/file-view-test/jyqx/jyqx66825a97e4b009ea29b73607';
          const fileName = '生源错误信息.xlsx'; // 你可以根据需要更改文件名
          try {
            // 使用 fetch 获取文件内容
            const response = await fetch(this.sourceinfoData.url);
            if (!response.ok) {
              throw new Error('文件未成功获取：' + response.statusText);
            }
            // 获取文件的 Blob 对象
            const blob = await response.blob();
            // 创建一个隐藏的 <a> 元素
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = URL.createObjectURL(blob);
            a.download = fileName;
            // 将 <a> 元素添加到 DOM 中
            document.body.appendChild(a);
            // 触发点击事件
            a.click();
            // 移除 <a> 元素
            document.body.removeChild(a);
            // 释放 Blob URL
            URL.revokeObjectURL(a.href);
          } catch (error) {
            console.error('There has been a problem with your fetch operation:', error);
          }

        }


        // getsyErrorDataAPI({url: this.sourceinfoData.url}).then(res => {
        //   console.log(this.sourceinfoData.url,'this.sourceinfoData.url')
        //   // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
        //   const blob = new Blob([res], {type: 'charset=utf-8'});
        //   let url = window.URL.createObjectURL(blob);
        //   const link = document.createElement('a');
        //   link.style.display = 'none';
        //   link.href = url;
        //   link.setAttribute('download', '生源错误信息.xlsx');
        //   document.body.appendChild(link);
        //   link.click();
        //   document.body.removeChild(link); // 删除节点
        //   window.URL.revokeObjectURL(url); //释放该 url
        // })
      }
      if (this.downloadType === '2') {
        if (this.sourceinfoData.url.indexOf('hnbysjy.jyt.henan.gov.cn') !== -1) {
          // const url = 'https://hnbysjy.jyt.henan.gov.cn/file-view-test/jyqx/jyqx66825a97e4b009ea29b73607';
          const fileName = '去向登记错误信息.xlsx'; // 你可以根据需要更改文件名
          try {
            // 使用 fetch 获取文件内容
            const response = await fetch(this.sourceinfoData.url);
            if (!response.ok) {
              throw new Error('文件未成功获取：' + response.statusText);
            }
            // 获取文件的 Blob 对象
            const blob = await response.blob();
            // 创建一个隐藏的 <a> 元素
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = URL.createObjectURL(blob);
            a.download = fileName;
            // 将 <a> 元素添加到 DOM 中
            document.body.appendChild(a);
            // 触发点击事件
            a.click();
            // 移除 <a> 元素
            document.body.removeChild(a);
            // 释放 Blob URL
            URL.revokeObjectURL(a.href);
          } catch (error) {
            console.error('There has been a problem with your fetch operation:', error);
          }

        }
        // getErrorDirectionDataAPI({ url: this.sourceinfoData.url }).then(res => {
        //     // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
        //     const blob = new Blob([res], { type: 'charset=utf-8' });
        //     let url = window.URL.createObjectURL(blob);
        //     const link = document.createElement('a');
        //     link.style.display = 'none';
        //     link.href = url;
        //     link.setAttribute('download', '去向登记错误信息.xlsx');
        //     document.body.appendChild(link);
        //     link.click();
        //     document.body.removeChild(link); // 删除节点
        //     window.URL.revokeObjectURL(url); //释放该 url
        //
        // })
        console.log('毕业去向');
      }
      if (this.downloadType === '3') {
        console.log('户口迁移');
      }
      if (this.downloadType === '4') {
        console.log('档案');
      }


    }
  }
};
</script>

<style scoped lang="less">
/deep/ .el-dialog__header {
  //background-color: #2b85e4;
  border-bottom: #F2F6FC 1px solid;
}

/deep/ .el-dialog__title {
  line-height: 24px;
  font-size: 16px;
  font-weight: 700;
  color: #303133;
}

/*加载转动*/
.loading {
  margin-right: 10px;
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: loading-spin 1.2s linear infinite;
}

/*转动动画*/
@keyframes loading-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.home_body {
  width: 100%;
  height: 100%;
  background: #ffffff;

  .top_button_list {
    margin-top: 10px;
  }

  .main_body {
    width: 100%;
    height: 100%;
    margin: 0px 10px;
    padding-top: 10px;

    .top_title {
      font-size: 16px;
      font-weight: 600;
      padding: 10px;
      border-bottom: 1px solid rgb(235, 231, 231);
    }

    .bottom_body {
      width: 99%;
      height: 94%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      //padding-top: 10px;
      .top_button_list {
        padding: 10px;
        display: flex;
        font-size: 16px;
        align-items: center;

        .info {
          display: flex;
          align-items: center;
          margin-left: 30px;
          font-size: 16px;
          color: rgba(0, 0, 0, 0.5);

          .el-icon-check {
            margin-right: 10px;
            font-size: 30px;
          }
        }
      }

      .bottom_info_body {
        width: 100%;
        height: 100%;
        padding: 10px 0px;

        .bottom_item {
          //display: flex;
          //justify-content: space-between;
          //align-items: center;
          margin-bottom: 20px;

          .card_black {
            flex: 1;
            padding: 10px;
          }

          .card_body {
            flex: 1;
            padding: 10px;
            border: 1px solid rgb(235, 231, 231);
            border-radius: 5px;

            .title {
              font-size: 14px;
              font-weight: 600;
            }

            .car_info {
              padding: 10px;
              font-size: 14px;
              margin: 20px 0px;
              color: rgba(0, 0, 0, 0.5);
              background: rgb(230, 247, 255);
              border: 1px solid rgb(145, 213, 255);
              border-radius: 5px;
            }

            .button_info {
              display: flex;
              align-items: center;
            }

            .info {
              display: flex;
              align-items: center;
              margin-left: 30px;
              font-size: 16px;
              color: rgba(0, 0, 0, 0.5);

              .el-icon-check {
                margin-right: 10px;
                font-size: 30px;
              }
            }
          }
        }

        .log_info {
          width: 100%;
          height: 100%;
          border: 1px solid rgb(235, 231, 231);

          .log_title {
            width: 100%;
            height: 40px;
            font-size: 14px;
            font-weight: 600;
            padding-left: 20px;
            display: flex;
            align-items: center;
          }

          .log_content {
            width: 100%;
            height: calc(100% - 80px);
            padding-top: 2px;

            .log_item {
              width: 100%;
              // height: 90px;
              margin-bottom: 8px;

              .log_item_title {
                width: 100%;
                height: 10px;
                display: flex;
                align-items: center;

                .circle {
                  width: 10px; /* 设置宽度 */
                  height: 10px; /* 设置高度 */
                  border-radius: 50%; /* 将边角半径设为50%，这样元素就会呈现为圆形 */
                  border: 2px solid rgb(41, 152, 255); /* 设置边框 */
                  //background-color: rgb(41, 152, 255); /* 设置圆形的背景颜色 */
                  margin-left: 12px;
                  margin-right: 12px;
                }

                .log_item_time {
                  font-size: 14px;
                }
              }

              .log_item_content {
                margin-left: 34px;
                margin-top: 10px;
                word-wrap: break-word;

                .log_item_contentFont {
                  font-size: 14px;
                  margin-right: 4px;
                }

                .number_item {
                  font-size: 14px;
                  margin-right: 4px;
                  color: rgba(41, 152, 255);
                }
              }

            }
          }

          .log_footer {
            width: 100%;
            height: 40px;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            color: rgba(41, 152, 255);
          }
        }
      }

      .scoll-y {
        overflow-y: auto;
      }
    }
  }
}

.cdialog {
  // width: 650px
}

.down-btn {
  color: #4081ff;
  cursor: pointer;
  font-weight: 700
}
</style>
